<template>
  <div class="app-container">
    <!-- 过滤 -->
    <div class="filter-container">
      <el-input v-model="listQuery.id" placeholder="申请单号" style="width: 200px;" class="filter-item" />
      <el-select v-model="listQuery.requestType" default-first-option placeholder="申请类型" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in requestType" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.planNumber" placeholder="计划单号" style="width: 200px;" class="filter-item" />
      <el-input v-model="listQuery.applicant" placeholder="申请人" style="width: 200px;" class="filter-item" />
      <el-date-picker v-model="listQuery.requestDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="申请日期" style="width: 200px;" class="filter-item" />
      <el-select v-model="listQuery.requestStatus" default-first-option placeholder="申请状态" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in requestStatus" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.approver" placeholder="审核人" style="width: 200px;" class="filter-item" />
      <el-date-picker v-model="listQuery.approvalDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="审核日期" style="width: 200px;" class="filter-item" />
      <el-select v-model="listQuery.approvalStatus" default-first-option placeholder="审核状态" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in approvalStatus" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="resetHandler">
        重置
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column
        label="编号"
        width="50"
        align="center"
      >
        <template slot-scope="scope">
          {{ (listQuery.page - 1) * listQuery.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请单号">
        <template slot-scope="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请类型" prop="requestType">
        <template slot-scope="{row}">
          <span v-show="row.requestType == 0">
            计划申请
          </span>
          <span v-show="row.requestType == 1">
            补货申请
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划单号" prop="planNumber" />
      <el-table-column align="center" label="申请人" prop="applicant" />
      <el-table-column align="center" label="申请日期" prop="requestDate" />
      <el-table-column align="center" label="申请状态" prop="requestStatus">
        <template slot-scope="{row}">
          <el-link v-show="row.requestStatus == 0" type="primary">未提交</el-link>
          <el-link v-show="row.requestStatus == 1" type="danger">待审核</el-link>
          <el-link v-show="row.requestStatus == 2" type="success">已审核</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核人" prop="approver" />
      <el-table-column align="center" label="审核日期" prop="approvalDate" />
      <el-table-column align="center" label="审核状态" prop="approvalStatus">
        <template slot-scope="{row}">
          <el-tag :type="row.approvalStatus != 0 ? 'danger' : 'success'">{{ row.approvalStatus == 0 ? '通过' : '驳回' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <!-- 悬浮提示效果 -->
          <el-tooltip class="item" effect="dark" content="详细" placement="bottom">
            <el-button type="primary" icon="el-icon-position" circle @click="openDialog(row)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />

    <!-- 对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form">
        <el-form-item label="申请人" :label-width="formLabelWidth">
          <el-input
            v-model="form.applicant"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="审核意见" :label-width="formLabelWidth" prop="description">
          <el-input v-model="form.approvalComments" type="textarea" :rows="2" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="danger" :disabled="form.approvalStatus == 1" @click="submitForm(1)">驳 回</el-button>
        <el-button type="primary" :disabled="form.approvalStatus == 0" @click="submitForm(0)">通 过</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { fetchList, fetchOne, edit } from '@/api/purchase-approval'
export default {
  name: 'PurchaseApproval',
  components: { Pagination },
  data() {
    return {
      // 功能标题
      title: '采购申请审核',
      tableKey: 0,
      listLoading: true,
      // 查询参数
      listQuery: {
        page: 1,
        size: 10,
        id: '',
        requestType: '',
        planNumber: '',
        applicant: '',
        requestDate: null,
        requestStatus: '',
        approver: '',
        approvalDate: null,
        approvalStatus: ''
      },
      // 表格数据
      list: null,
      // 总数
      total: 0,
      // 对话框显示
      dialogFormVisible: false,
      // 对话框宽度
      formLabelWidth: '120px',
      // 表单
      form: {},
      // 对话框标题
      dialogTitle: '审核采购申请',
      requestType: [
        { key: '0', label: '计划申请' },
        { key: '1', label: '补货申请' }
      ],
      requestStatus: [
        { key: '0', label: '未提交' },
        { key: '1', label: '待审核' },
        { key: '2', label: '已审核' }
      ],
      approvalStatus: [
        { key: '0', label: '通过' },
        { key: '1', label: '驳回' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * 查询
     */
    handleFilter() {
      this.getList()
    },
    /**
     * 重置
     */
    resetHandler() {
      this.listQuery = {
        page: 1,
        size: 10
      }
    },
    /**
     * 获取列表
     */
    getList() {
      fetchList(this.listQuery).then(resp => {
        const { data } = resp
        this.total = data.total
        this.list = data.list
      }).finally(() => {
        this.listLoading = false
      })
    },
    /**
     * 执行操作 审核入库申请
     */
    submitForm(approvalStatus) {
      this.form.approvalStatus = approvalStatus
      // 执行操作
      edit(this.form).then(res => {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success',
          duration: 5000
        })
      }).finally(() => {
        this.dialogFormVisible = false
        this.getList()
      })
    },
    /**
     * 开启对话框
     * @param {*} row 行数据
     */
    openDialog(row, handle) {
      this.dialogFormVisible = true
      // 开启对话框清空表单数据
      this.form = {}
      // TODO 获取对应的数据
      this.getOne(row.id)
    },
    /**
     * 获取单个信息
     * @param { Number } id 分类id
     */
    getOne(id) {
      fetchOne(id).then(resp => {
        this.form = resp.data
      })
    }
  }
}
</script>
<style scoped></style>
